<template>
	<view class="agent-index">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">拓店者管理中心</block>
		</cu-custom>
    
		<view class="agent-item-container">
		  <view class="agent-item" @tap="jumpTo('/pages/my/agent/shop', 'inside', true)">
			<image src="../../../static/agent_1.png" mode="scaleToFill"></image>
			<text class="items-title">我的商家</text>
			<text class="cuIcon cuIcon-right"></text>
		  </view>
		  <view class="agent-item" @tap="jumpTo('/pages/my/agent/rebate', 'inside', true)">
			<image src="../../../static/agent_2.png" mode="scaleToFill"></image>
			<text class="items-title">我的收益</text>
			<text class="cuIcon cuIcon-right"></text>
		  </view>
		  <view class="agent-item" @tap="jumpTo('/pages/my/agent/shopApply', 'inside', true)">
		  <!-- <view class="agent-item" @tap="jumpTo('/pages/shipment/index', 'inside', true)"> -->
			<image src="../../../static/agent_3.png" mode="scaleToFill"></image>
			<text class="items-title">拓店申请</text>
			<text class="cuIcon cuIcon-right"></text>
		  </view>
		  <view class="agent-item" @click="hideModal">
		  <!-- <view class="agent-item" @tap="jumpTo(signUp, 'web')"> -->
			<image src="../../../static/agent_4.png" mode="scaleToFill"></image>
			<text class="items-title">结算卡认证</text>
			<text class="cuIcon cuIcon-right"></text>
		  </view>
		  <!-- <view class="agent-item" @tap="jumpTo('/pages/my/agent/deposit', 'inside', true)">
		  	<image src="../../../static/agent_5.png" mode="scaleToFill"></image>
		  	<text class="items-title">代付押金</text>
		  	<text class="cuIcon cuIcon-right"></text>		
		  </view> -->
		</view>
		<view class="cu-modal" style="z-index: 99;" :class="modalActive ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-sm">
					<view class="moda-msg">{{message}}</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view class="uni-list-cell-item">
								<radio :value="item.value" :checked="index === current" />
								<text>{{item.name}}</text>
							</view>
						</label>
					</radio-group>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="selectWay">确定</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import shop from '@/api/shop';
	export default {
		data() {
			return {
				form: {
					title: '',
					bind_uid: '',
					logo: '',
					agent_uid: '',
					discount: '',
					reason: '',
					region: ['北京市', '北京市', '东城区'],
					indoor_pic: '',
					address: '',
					lng: '',
					lat: '',
					albumInfo: '',
					mobile: '',
					type: '',
					position: 'boss'
				},
				signUp: 'https://f.hhs8888.com/pay/index/signUp',
				modalActive: false,
				title: '',
				current:'',
				imgList: [],
				loading: false,
				items: [{
					name: '自动审核通道(推荐)',
					value: 1
				}, {
					name: '人工审核通道',
					value: 0
				}],
			}
		},
		methods:{
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			selectWay() {
				const that = this;
				this.form.type = this.items[this.current].value;
				// 处理albumInfo字段 多个完整的URL地址以英文逗号,隔开
				this.form.albumInfo = this.imgList.join(",");
				shop.apply(this.form).then(res => {
					this.hideModal()
					if (res.data) {
						this.jumpTo(res.data.url, 'web')
					} else if (res.code == 0) {
						this.toast(res.msg);
					}
				})
			},
			// tap="jumpTo(signUp, 'web')"
			async hideModal() {
				this.modalActive = !this.modalActive;
			},
		}
	}
</script>

<style lang="less">
	.agent-index {
		height: 100vh;
		background: #fff;
		.agent-item-container{
		  margin: 15rpx auto;
		  // text-align: center;
		  padding: 0 30rpx;
		  .agent-item{
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			padding: 0 25rpx;
			// background: #EFEFEF;
			background-image: linear-gradient(to bottom right, #ffce8d, #fecac0);
			border-radius: 10rpx;
			margin-bottom: 15rpx;
			font-size: 48rpx;
			color: #ffffff;
			image{
			  width: 100rpx;
			  height: 100rpx;
			  float: left;
		      margin-right: 15rpx;
			}
			.items-title{
				font-family: 'SimHei';
			}
			.cuIcon{
				float: right;
				font-family: 'cuIcon';
			}
		  }
		}
		.uni-list-cell-item {
			padding: 5px 0;
			margin: 5px 0;
			width: 200px;
			text-align: left;
		
			text {
				margin-left: 10px;
				position: relative;
				top: 2px;
			}
		}
		.moda-msg {
			text-align: center;
			font-size: 16px;
			margin: 10px 0;
		}
	}
</style>